<!-- wrapping all content of the page inside a div is just a convention, not required by framework though -->
<div>
	<!-- top bar -->
	<div class="navbar">
	  <div class="navbar-inner">
		<div class="container-fluid">
		  <a class="brand">Pages - Navigatable user interface.</a>
		  <div class="pull-right">
			<a class="navbar-text noline" href="..\..\conceptual\pages" fluid-noIntercept target="_blank" title="Open source folder"><i class="icon-folder-open"></i> Source</a> 
			<a class="navbar-text noline" href="http://docs.fluidjs.vikasburman.com/2013/01/pages.html" fluid-noIntercept target="_blank" title="Open example page"><i class="icon-file"></i> Docs</a>
		  </div>
		</div>
	  </div>
	</div>
	<!-- -->

	<div class="container-fluid">
		<div class="row-fluid">

			<!-- side bar -->
			<div class="span3"><div class="well sidebar-nav">
				<!-- sections -->
				<div class="accordion" id="accordion">
				  <!-- showcase -->
				  <div class="accordion-group"><div class="accordion-heading"><a class="accordion-toggle nav-header noline" data-toggle="collapse" data-parent="#accordion" href="#sec1" fluid-noIntercept>
					<i class="icon-comment"></i> Showcase
				  </a></div><div id="sec1" class="accordion-body collapse in"><div class="accordion-inner">
					<p><i class="icon-cog"></i> This shows how pages can be defined and navigated to.</p>
				  </div></div></div>
				  <!-- -->
				  <!-- observations -->
				  <div class="accordion-group"><div class="accordion-heading"><a class="accordion-toggle nav-header noline" data-toggle="collapse" data-parent="#accordion" href="#sec2" fluid-noIntercept>
					<i class="icon-eye-open"></i> Observations
				  </a></div><div id="sec2" class="accordion-body collapse"><div class="accordion-inner">
					<p><i class="icon-cog"></i> If you are seeing this message, you have successfully navigated to default page.</p>
					<p><i class="icon-cog"></i> Note the address bar for "#pages/myPage1.page" hashtag. This shows that you are navigated to this page.</p>
					<p><i class="icon-cog"></i> Take note that onBeforeLoad and onAfterLoad are fired after load event of the plugin. This is because these
					event handlers wrap page content load process and not the load of page plugin.</p>
					<p><i class="icon-cog"></i> Did you notice page title is added on browser window/tab title.</p>
				  </div></div></div>
				  <!-- -->
				  <!-- Activities -->
				  <div class="accordion-group"><div class="accordion-heading"><a class="accordion-toggle nav-header noline" data-toggle="collapse" data-parent="#accordion" href="#sec3" fluid-noIntercept>
					<i class="icon-hand-right"></i> Activities
				  </a></div><div id="sec3" class="accordion-body collapse"><div class="accordion-inner">
					<p><i class="icon-cog"></i> Have a look at <span class="file">*.js</span> files.</p>
					<p><i class="icon-cog"></i> Usign developer tools, check-out structure of <span class="object">$f.page</span>.</p>
					<p><i class="icon-cog"></i> Click on hyperlinks below to navigate to a different page via href url. Take note of the url pattern 
					(this is using fluid:// protocol) on browser status bar.
					<a href="fluid://pages/myPage2.page">Navigate to myPage2 (w/o args)</a><br />
					<a href="fluid://pages/myPage2.page$arg1=11&arg2=12">Navigate to myPage2 (w args)</a></p>
					<p><i class="icon-cog"></i> Click on button below to navigate to a different page programatically.<br />
					<input class="btn btn-primary" type="submit" value="Navigate to myPage3" onclick="javascript:$f.nav.navigateTo('fluid://pages/myPage3.page', {arg1: 111, arg2: 222});" /></p>
				  </div></div></div>
				  <!-- -->
				  <!-- Takeaways -->
				  <div class="accordion-group"><div class="accordion-heading"><a class="accordion-toggle nav-header noline" data-toggle="collapse" data-parent="#accordion" href="#sec4" fluid-noIntercept>
					<i class="icon-shopping-cart"></i> Takeaways
				  </a></div><div id="sec4" class="accordion-body collapse"><div class="accordion-inner">
					<p><i class="icon-cog"></i> A page is like any other plugin, just defined using a <span class="object">page</span> extender instead of <span class="object">custom</span> extender.</p>
					<p><i class="icon-cog"></i> Page has additional life cycle events.</p>
					<p><i class="icon-cog"></i> Page maintains its session items even when it navigates out. This can be controlled via config, refer documentation.</p>
					<p><i class="icon-cog"></i> Layout auto-wire can automatically picks up the layout of the page.</p>
				  </div></div></div>
				  <!-- -->
				</div>
				<!-- -->
			</div></div>
			<!-- -->
			
			<!-- right half where the action is -->
			<div class="span9"><div class="row-fluid">
				
				<!-- tabs -->
				<ul class="nav nav-tabs">
					<li id="t1" class="active"><a href="#" onclick="javascript: return showTab('t1', 'lifecycle');">Page Lifecycle Events</a></li>
					<li id="t2"><a href="#" onclick="javascript: return showTab('t2', 'sessionItems');">Session Items</a></li>
				</ul>
				<!-- -->

				<!-- page title -->
				<div id="title">
				</div>						
				<!-- -->
				
				<!-- events log -->
				<div id="lifecycle">
				</div>						
				<!-- -->

				<!-- session items -->
				<div id="sessionItems" style="display: none;">
				</div>						
				<!-- -->
						
			</div></div>
			<!-- -->
			
		</div>	
	</div>
	
</div>
